<template>
	<navbar title="我的订单" :isBack="true"></navbar>
	<view class=""
		style="height: 88rpx;width: 100%;display: flex;justify-content: space-around;align-items: center;background-color: white;border-bottom: 1rpx solid #F3F3F3;">
		<view class="" :class="type == 1 ? 'active':'default'" @tap="clickTab(1)">
			订单中心
		</view>
		<view class="" :class="type == 2 ? 'active':'default'" @tap="clickTab(2)">
			售后中心
		</view>
	</view>
	<view class="">
		<u-tabs active-color="#3E5088" :list="tabsList" :is-scroll="false" v-model="current"
			@change="tabsChange"></u-tabs>
	</view>
	<view class="" style="padding: 20rpx 30rpx;">
		<view class="" v-for="item in Info.data"
			style="background-color: white;padding: 28rpx;position: relative;border-radius: 10rpx;margin-bottom: 20rpx;"
			@tap="detail(item.id)">
			<view class=""
				style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding-bottom: 20rpx;border-bottom: 1rpx solid #F3F3F3;">
				<view class="" style="font-size: 26rpx;">
					{{item.order_no}}
				</view>
				<view class="" v-if="!item.after_sales">
					<span style="color: #E83F3F;" v-if="item.state == 1 && type == 1">待付款</span>
					<span style="color: #E83F3F;" v-if="item.state == 2 && type == 1">待发货</span>
					<span style="color: #E83F3F;" v-if="item.state == 3 && type == 1">待收货</span>
					<span style="color: #E83F3F;" v-if="item.state == 4 && type == 1">已完成</span>
					<span style="color: #E83F3F;" v-if="item.state == 1 && type == 2">申请中</span>
					<span style="color: #E83F3F;" v-if="item.state == 2 && type == 2">待寄回</span>
					<span style="color: #E83F3F;" v-if="item.state == 3 && type == 2">回寄中</span>
					<span style="color: #E83F3F;" v-if="item.state == 4 && type == 2">已完成</span>
					<span style="color: #E83F3F;" v-if="item.state == 5 && type == 2">已驳回</span>
				</view>
				<!-- 售后状态 -->
				<view class="" v-else>
		 
					<span style="color: #E83F3F;" v-if="item.after_sales == 1 ">申请中</span>
					<span style="color: #E83F3F;" v-if="item.after_sales == 2">已退款</span>
				</view>
			</view>
			<view class="" style="margin-top: 30rpx;display: flex;" v-for="items in item.goods">
				<view class="">
					<image :src="items.goods_cover" style="width: 140rpx;height: 140rpx;border-radius: 10rpx;" mode="">
					</image>
				</view>
				<view class=""
					style="margin-left: 20rpx;display: flex;flex-direction: column;justify-content: space-between;height: 140rpx;width: 100%;">
					<view class="" style="display: flex;justify-content: space-between;width: 100%;">
						<view class="ellipsis-2" style="width: 330rpx;">
							{{items.goods_name}}
						</view>
						<view class="" style="font-weight: bold;">
							<span style="font-size: 20rpx;">￥</span>
							<span style="font-size: 32rpx;">{{items.goods_price}}</span>
						</view>
					</view>
					<view class=""
						style="width: 100%;display: flex;justify-content: space-between;color: #747474;font-size: 24rpx;">
						<view class="" style="">
							{{items.specs}}
						</view>
						<view class="">
							x{{items.num}}
						</view>
					</view>
				</view>
			</view>
			<view class="" style="margin-top: 40rpx;display: flex;justify-content: flex-end;">
				<view class="" v-if="item.state == 1 && type == 1" @tap.stop="cancel(1,item)"
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background-color: #F3F4F4;">
					取消订单
				</view>

				<view class="" @tap.stop="apply(item)"
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background-color: #F3F4F4;margin-left: 20rpx;"
					v-if="item.state != 1 && type == 1 && item.order_id <= 0">
					申请售后
				</view>
				<view class=""
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background-color: #F3F4F4;margin-left: 20rpx;"
					v-if="item.state ==3 && type == 2">
					查看物流
				</view>
				<view class=""
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background-color: #F3F4F4;margin-left: 20rpx;"
					v-if="type == 2">
					售后详情
				</view>
				<view class="" v-if="item.state == 1 && type == 1" @tap.stop="pay(item.id)"
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background: linear-gradient( 90deg, #5062A7 0%, #354678 100%);;color: white;margin-left: 20rpx;">
					立即付款
				</view>
				
				<view class="" v-if="item.state < 4 && type == 2" @tap.stop="cancel(2,item)"
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background-color: #F3F4F4;margin-left: 20rpx;">
					取消售后
				</view>
				<view class="" v-if="item.state ==2 && type == 2"
					style="width: 200rpx;height: 72rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;background: linear-gradient( 90deg, #5062A7 0%, #354678 100%);;color: white;margin-left: 20rpx;">
					寄件上传
				</view>
			</view>
		</view>
		<view class="" v-if="Info.data.length <= 0">
			<view
				style="width: 100%;height: calc(100vh - 400rpx);background-color: #F4F4F8;display: flex;justify-content: center;align-items: center;flex-direction: column;">
				<image src="/static/image/nodata.png" style="width: 167rpx;height: 96rpx;" mode=""></image>
				<view class="" style="color: #999999;">
					暂无数据
				</view>
			</view>
		</view>
	</view>
	<!-- 售后弹窗 -->
	<u-popup v-model="afterSales" :border-radius="30" mode="bottom" @close="afterSales=false"
		style="position: relative;">
		<image class="chahaoC" :src="imageUrl+'colse_chooseshop.png'" mode="aspectFit" @click="afterSales=false">
		</image>
		<after-salesd :listData="listData" :imageUrl="imageUrl" ref="salesChild"></after-salesd>
	</u-popup>
</template>

<script setup lang="ts">
	import {
		onLoad, onShow, onShareAppMessage, onShareTimeline, onReachBottom
	} from '@dcloudio/uni-app'
	import { reactive, ref, nextTick } from 'vue'
	import afterSalesd from "@/components/popup/afterSales.vue"
	import { shopOrderList, shopCancelOrder, shopAfterSalesList, shopCancelAfterSales } from '@/service/api/shop'
	import tools from '@/utils/tools'
	const type = ref(1)//1是订单中心 2是售后中心
	const current = ref(0)
	const param = reactive({
		page: 1,
		state: 0
	})
	const afterSales = ref(false)
	const imageUrl = ref('https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/')
	const listData = reactive({
		goods: [
			{
				checked: false,
				choose: "",
				goods_cover: "",
				goods_name: "",
				goods_price: "",
				specs: "",
				num: "",
				after_sales: 0,

			}
		],
		id: ""
	})//售后数组
	onLoad((opt) => {
		if (opt.type) {
			type.value = opt.type;
		}
	})
	const tabsList = ref([{
		name: "全部"
	}, {
		name: "待付款"
	}, {
		name: "待发货"
	}, {
		name: "待收货"
	}, {
		name: "已完成"
	}])
	const Info = ref({
		data: []
	}) as any
	onShow(() => {
		getData()
	})
	const tabsChange = (v : any) => {
		param.state = v;
		getData()
		console.log(v);
	}
	const clickTab = (i : number) => {
		type.value = i;
		param.state = 0;
		if (type.value == 1) {
			tabsList.value = [{
				name: "全部"
			}, {
				name: "待付款"
			}, {
				name: "待发货"
			}, {
				name: "待收货"
			}, {
				name: "已完成"
			}]
		} else if (type.value == 2) {
			tabsList.value = [{
				name: "全部"
			}, {
				name: "待处理"
			}, {
				name: "已处理"
			}]
		}
		getData()
	}

	onReachBottom(() => {
		if (Info.value.current_page < Info.value.last_page) {
			param.page += 1;
			getData()
		} else {
			tools.showToast('数据加载完了~')
		}
	})
	const getData = async () => {
		if (type.value == 1) {
			//商品订单
			const res = await shopOrderList(param)
			Info.value = res.msg;
		} else {
			//售后订单数据
			const res = await shopAfterSalesList(param);
			Info.value = res.msg;
			console.log(res);
		}


	}
	//取消
	const cancel = async (i, item) => {
		//1是取消订单 2是取消售后
		if (i == 1) {
			const res = await shopCancelOrder({ id: item.id });
			if (res.code == 1) {
				tools.showToast(res.msg)
			}
		} else {
			const res = await shopCancelAfterSales({ id: item.id })
			if (res.code == 1) {
				tools.showToast(res.msg)
			}

		}
		setTimeout(() => {
			getData()
		}, 500)

	}
	const detail = (id) => {
		console.log(123123);
		if (type.value == 1) {
			//商品订单详情
			tools.navTo('/pagesB/order/goodsOrderDetail?id=' + id);
		} else {
			//售后订单详情
			tools.navTo('/pagesB/order/apply/applyDetail?id=' + id);
		}

	}

	//申请售后
	const apply = (item) => {

		listData.goods = item.goods;
		listData.id = item.id
		afterSales.value = true;
		console.log(listData);
		//item是订单
		// let goods_ids = []
		// item.goods.forEach((t) => {
		// 	goods_ids.push(t.id);
		// })
		// tools.navTo('/pagesB/order/apply/apply?id=' + item.id + '&goods_ids=' + JSON.stringify(goods_ids));
	}
	//支付
	const pay = (id) => {
		tools.navTo('/pagesB/order/pay?id=' + id + '&type=3')
	}
</script>

<style scoped lang="scss">
	.chahaoC {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		top: 30rpx;
		right: 30rpx;
		z-index: 22;
	}

	.active {
		color: #3E5088;
		font-size: 32rpx;
		font-weight: bold;
	}

	.default {
		font-size: 32rpx;
	}

	.ellipsis-2 {
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。

		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 2;
		//设置文本行数为2行
		line-clamp: 2;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}
</style>
<style>
	page {
		background: #F5F6F8;
	}
</style>